<template>
    <div>
        <PageContainer title="角色列表">
            <template v-slot:extra>
                <el-button size="large" style="margin-left: 50px;" type="success" @click="onAddRole">新增</el-button>
            </template>
            <div class="mod-web__user">
                <el-table :data="rolesList">
                    <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
                    <el-table-column prop="name" label="名称" header-align="center" align="center"></el-table-column>
                    <el-table-column prop="description" label="标识" header-align="center" align="center"></el-table-column>
                    <el-table-column prop="sort" label="排序" header-align="center" align="center"></el-table-column>
                    <el-table-column prop="roleCount" label="角色数量" header-align="center" align="center"></el-table-column>
                    <el-table-column prop="createDate" label="创建时间" header-align="center" align="center">
                        <template #default="{row}">
                            {{formatTime(row.createDate)}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="delFlag" label="状态" sortable header-align="center" align="center">
                        <template #default="{row}">
                            <el-tag :v-if="row.delFlag === 0">正常</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
                        <template #default="{row}">
                            <el-button type="primary" link @click="onEditRole(row)" >编辑</el-button>
                            <el-button type="danger" link @click="deleteRoleById(row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
    
                <!-- 弹窗, 新增 / 修改 -->
                <updateRole ref="roleEditRef"></updateRole>
                <addRole ref="roleAddRef"></addRole>
            </div>
            <div class="page">
      <el-pagination :page-sizes="[10, 15, 20]" layout="total, sizes, prev, pager, next,jumper" :total="total"
        v-model:current-page="params.pageNum" v-model:page-size="params.pageSize" @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle" />
    </div>
        </PageContainer>
    </div>
</template>
<script setup lang="ts">
import { ref,provide} from 'vue';
import { formatTime } from '@/utils/format';
import { roleList, deleteRoles} from '@/service/api';
import PageContainer from '@/components/PageContainer.vue';
import  updateRole  from './components/updateRole.vue';
import addRole from './components/addRole.vue';
const total = ref(1)
const params = ref({
    pageNum: 1,
    pageSize: 10
})
const rolesList = ref<any>([])
const status = ref()
const roleEditRef = ref()
const roleAddRef = ref()
// 获取角色列表
const getRoleList = async () => {
    const res = await roleList(params.value)
    rolesList.value = res.data.data.list
    status.value = res.data.data.delFlag
    total.value = res.data.data.total
}
getRoleList()
provide('getRoleList', getRoleList)
//删除角色信息
const deleteRoleById = async (row: any) => {
    await ElMessageBox.confirm('是否删除角色信息','提示',{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:'warning'
    })
    await deleteRoles({id:row.id})
    ElMessage.success('删除成功')
    getRoleList()
}

//编辑角色信息
const onEditRole = (row:any) =>{
    roleEditRef.value.open(row)
}
//添加角色信息
const onAddRole = () =>{
    roleAddRef.value.open({})
}
//分页，每页条数
const pageSizeChangeHandle = (val: number) => {
  params.value.pageSize = val;
  params.value.pageNum = 1;
  getRoleList()
}
//分页，当前页
const pageCurrentChangeHandle = (val: number) => {
  params.value.pageNum = val;
  getRoleList()
}
</script>
<style scoped lang="less"></style>